.replyBox {
  display: flex;
  gap: 16px;
  padding: 12px;
  background: #fff;
  border-radius: 8px;
  margin: 12px 0;
  transition: all 0.3s ease;
  
  // 左侧头像区域
  .avatarSection {
    flex-shrink: 0;
    
    .avatar {
      width: 36px;
      height: 36px;
      border: 1px solid #f0f0f0;
      border-radius: 50%;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 10%);
      transition: all 0.3s ease;
      
      &:hover {
        transform: scale(1.05);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 15%);
      }
    }
  }
  
  // 右侧内容区域
  .contentSection {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    
    // 输入框包装器
    .inputWrapper {
      .textArea {
        border: 1px solid #d9d9d9;
        border-radius: 6px;
        padding: 8px 12px;
        font-size: 13px;
        line-height: 1.4;
        background: #fafafa;
        transition: all 0.3s ease;
        resize: none;
        
        &:hover {
          border-color: #40a9ff;
        }
        
        &:focus {
          border-color: #1890ff;
          box-shadow: 0 0 0 3px rgba(24, 144, 255, 15%);
          background: #fff;
        }
        
        &::placeholder {
          color: #999;
          font-size: 14px;
        }
      }
    }
    
    // 操作按钮区域
    .actionButtons {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
      
      .cancelBtn {
        border-color: #d9d9d9;
        color: #666;
        border-radius: 4px;
        height: 28px;
        padding: 4px 12px;
        font-size: 12px;
        font-weight: 500;
        transition: all 0.2s ease;
        
        &:hover {
          border-color: #40a9ff;
          color: #40a9ff;
          background: #f0f8ff;
          transform: translateY(-1px);
        }
      }
      
      .submitBtn {
        background-color: #1890ff;
        border-color: #1890ff;
        border-radius: 4px;
        height: 28px;
        padding: 4px 16px;
        font-size: 12px;
        font-weight: 500;
        transition: all 0.2s ease;
        
        &:hover:not(:disabled) {
          background-color: #40a9ff;
          border-color: #40a9ff;
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(24, 144, 255, 30%);
        }
        
        &:active:not(:disabled) {
          transform: translateY(0);
          box-shadow: 0 2px 6px rgba(24, 144, 255, 20%);
        }
        
        &:disabled {
          background-color: #f5f5f5;
          border-color: #d9d9d9;
          color: #bfbfbf;
          cursor: not-allowed;
          transform: none;
          box-shadow: none;
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .replyBox {
    gap: 12px;
    padding: 12px;
    
    .avatarSection {
      .avatar {
        width: 40px;
        height: 40px;
      }
    }
    
    .contentSection {
      gap: 12px;
      
      .actionButtons {
        flex-direction: column-reverse;
        
        .cancelBtn,
        .submitBtn {
          width: 100%;
          justify-content: center;
        }
      }
    }
  }
}

// 动画效果
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.replyBox {
  animation: fadeInUp 0.3s ease-out;
}

// 聚焦状态增强
.replyBox:focus-within {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 10%), 0 4px 12px rgba(0, 0, 0, 10%);
}